<template>
    <div>
        <barTab/>
        <!-- <loading :loading="loadingTrue"/> -->
        <transition name="fade">
            <div style="margin-bottom: 1.5rem" v-if="status.length != ''">
                <div class="header">任务列表</div>
                <div class="platforms_tab">
                    <ul>
                        <li
                            v-for="tab in platforms_tab"
                            v-if="tab.platform_tag != 'tianmao'"
                            :class="{ on: platforms_tab_txt ==  tab.platform_tag}"
                            @click='platforms_tab_txt = tab.platform_tag, platforms_tab_id = tab.platform_id'
                        >{{ tab.platform_name }}
                        </li>
                    </ul>
                </div>
                <ul class="Status_ul">
                    <li class="clearfix" v-if="status">
                        <router-link :to="`/task/list/0?platform_id=` + platforms_tab_id">
                            <img src="@/../static/images/status10.png" alt="" class="statusLogo"/>
                            <img src="../../images/right.png" alt="" class="StatusLink"/>
                            <h3><span>任务领取大厅</span></h3>
                            <p class="StatusTxt">领取任务后请在一个小时内提交任务</p>
                        </router-link>
                    </li>
                    <li class="clearfix" v-for="sta in status" v-on:click="submit(sta.status,sta.name)">
                        <img :src="sta.logo" alt="" class="statusLogo"/>
                        <img src="../../images/right.png" alt="" class="StatusLink"/>
                        <h3><span>{{ sta.name }}</span>{{ sta.total_status_num }}单</h3>
                        <p v-if="time && sta.status == 5" class="no-time">请尽快修改提交 {{ time }} 后自动放弃</p>
                        <p class="StatusTxt" v-else>{{ sta.description }}</p>
                        <!--<div class="StatusNumbers" v-if="sta.status == 1 || sta.status == 2 || sta.status == 6">-->
                        <!--<p v-if="sta.status == 2">累积收益</p>-->
                        <!--<p v-else>预计收益</p>-->
                        <!--<span>{{ sta.total_status_money }}</span>-->
                        <!--</div>-->
                        <span class="StatusNumbers-span"
                              v-if="sta.status == 1 || sta.status == 2 || sta.status == 6"><i>￥</i>{{ sta.total_status_money }}</span>
                    </li>
                </ul>
                <!-- 底部切换 -->
            </div>
        </transition>
    </div>
</template>

<script>
    import api from '../../utils/api';
    import barTab from '@/components/components/barTabBottom';
    import loading from '@/components/components/loading';

    export default {
        name: 'MyTasks',
        components: {
            barTab,
            loading
        },
        data() {
            return {
                status: [],
                date: false,
                endTime: false,
                time: false,
                domin: localStorage.getItem('domin'),
                platforms_tab: [],
                platforms_tab_id: '',
                platforms_tab_txt: '',
                // loadingTrue: false
            }
        },
        methods: {
            async setData() {
                let resp = await api.request('/myWorks', 'get', {'platform_id': this.platforms_tab_id})
                // this.loadingTrue = false;
                for (let i in resp.data.data) {
                    resp.data.data[i].logo = '../static/images/status' + (resp.data.data[i].status) + '.png'
                    if (resp.data.data[i].status == 5 && resp.data.data[i].last_expire_time) {
                        this.endTime = new Date(parseInt(resp.data.data[i].last_expire_time) * 1000).toLocaleString('chinese', {hour12: false})
                        let time = setInterval(() => {
                            if (this.flag === true) {
                                clearInterval(time)
                                this.flagShow = false
                            } else {
                                this.flagShow = true
                            }
                            this.timeDown()
                        }, 1000)
                    }
                }
                this.status = resp.data.data;
            },
            async submit(status = 0, name = '全部任务') {
                this.$router.push({
                    path: `/task/my_task_list/${status}`,
                    query: {
                        status: status,
                        name: name,
                        platform_id: this.platforms_tab_id
                    }
                })
                // window.AndroidWebView.PictureCallback(`${this.domin}task/my_task_list/${status}`,name);
            },
            timeDown() {
                const endTime = new Date(this.endTime)
                const nowTime = new Date();
                let time = '';
                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 0) {
                    this.flag = true;
                    return false;
                }
                let ds = ''
                let hs = ''
                let ms = ''
                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                this.time = time + s + '秒';
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
        },
        async created() {
            localStorage.setItem('bartabInx', 2);

            // await api.request('/workAuditNum', 'get', {}).then(function (res) {
            //     localStorage.setItem("tbworkAuditNumber",res.data.data.taobao.num)
            //     localStorage.setItem("jdworkAuditNumber",res.data.data.jingdong.num)
            //     localStorage.setItem("pddworkAuditNumber",res.data.data.pingduoduo.num)
            // })
            
            // this.loadingTrue = true
            var that = this;
            //平台tab
            await api.request('/platforms', 'get', {}).then(function (res) {
                that.platforms_tab = res.data.data;
                for (let i in res.data.data) {
                    if (res.data.data[i].platform_tag == 'taobao') {
                        that.platforms_tab_txt = res.data.data[i].platform_tag
                        that.platforms_tab_id = res.data.data[i].platform_id
                    }
                }
            })
            // this.setData()

        },
        watch: {
            platforms_tab_id() {
                this.setData()
            }
        }

    }

</script>

<style scoped>
    .no-time {
        background: #FFEB6E;
        display: inline-block;
        padding: 0 .2rem;
        -webkit-border-radius: .2rem;
        -moz-border-radius: .2rem;
        border-radius: .2rem;
        font-weight: 600;
        font-size: 0.35rem
    }

    .header-bg {
        background: -webkit-linear-gradient(left, #F09F43, #F5C056); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #F09F43, #F5C056); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #F09F43, #F5C056); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #F09F43, #F5C056); /* 标准的语法 */
        position: absolute;
        height: 2rem;
        width: 100%;
    }
</style>
